<template>
  <div class="block">
    <px-dialog v-model="dialogVisible" title="取消原因" width="50%" align-center>
      <ColumnsTable :columns="columns" :data="data" />
    </px-dialog>
  </div>
</template>
<script setup lang="ts">
import ColumnsTable from "../../components/ColumnsTable.vue";
defineProps(["data"]);
const dialogVisible = defineModel("dialogVisible");
const columns = [
  [
    {
      label: "巡检任务编号",
      value: "taskNo"
    },
    {
      label: "巡检任务名称",
      value: "taskName"
    }
  ],
  [
    {
      label: "操作人",
      value: "cancelOperatorName"
    },
    {
      label: "操作日期",
      value: "cancelDate"
    }
  ],
  [
    {
      label: "原因",
      value: "cancelOpinion"
    }
  ]
];
</script>
<style lang="scss" scoped>
.inspect-table-btn {
  display: flex;
  align-items: center;
  margin-bottom: 8px;

  :deep(.px-button + .px-button) {
    margin-left: 0;
  }
}

.inspect-table {
  --px-table-border-color: #dfdfdf;

  font-size: 14px;

  :deep(.px-table__header) {
    thead {
      tr {
        background-color: #e7eefb !important;

        th {
          font-size: 14px;
          font-weight: bold;
          color: #000;
          background-color: #e7eefb !important;
        }
      }
    }
  }
  :deep(.px-table__cell) {
    padding: 0;
    height: 36px;
    line-height: 36px;
    .cell {
      height: 36px;
      line-height: 36px;
    }
  }
}

.inspect-table-pagination {
  position: absolute;
  right: 8px;
  bottom: 0;
}

.status {
  display: flex;
  flex-direction: row;
  align-items: center;

  .circle {
    width: 8px;
    height: 8px;
    margin-right: 5px;
    border-radius: 50%;
  }
}
</style>
